import React, { Component } from "react";
import Swiper from 'react-native-swiper';
import {
  View,
  Text,
  Image,
  ScrollView,
  FlatList,
  TouchableWithoutFeedback,
  TouchableHighlight,
  StyleSheet,
  RefreshControl,
} from "react-native";
import {width} from '../../util/apdater_util';
import {MarqueeVertical } from 'react-native-marquee-ab';
import  LinearGradient from 'react-native-linear-gradient';
import {Card} from 'react-native-shadow-cards';
import NetUtil from '../../net/net_util'
import {NativeModules} from "react-native";
import * as RootNavigation from '../../../App'

const SectionHeader=({title,style,callBack})=>{
  return (
    <View style={[styles.nav,style]}>
      <Text style={styles.navTitle}>{title}</Text>
      <TouchableWithoutFeedback onPress={callBack}>
        <View style={styles.more}>
          <Text style={styles.moreTitle}>更多</Text>
          <Image style={styles.arrow} source={require('../../img/arrow_gray.png')}></Image>
        </View>
      </TouchableWithoutFeedback>
    </View>
  )
}

const WorkCell=({data,onClick})=>{
  return (
    <TouchableWithoutFeedback style={{height:160}} onPress={()=>{onClick(data)}}>
      <View style={styles.workCell}>
        <Image style={styles.workImg} source={{uri:data.avatar}}></Image>
        <View style={styles.workContent}>
          <View style={styles.workTitleBox}>
            <Text style={styles.workName}>{data.title}</Text>
            <Text style={styles.score}>{data.points}积分</Text>
          </View>
          <View style={styles.tags}>
            <Text style={styles.tag}>{data.skillName}</Text>
            <Text style={styles.tag}>{data.industryName}</Text>
          </View>
          <View style={styles.timeBox}>
            <Text style={styles.time}>截稿时间：{data.deadlineTime}</Text>
            <Text style={styles.time}>参与人数：{data.joinNum}</Text>
          </View>
          <Text style={styles.workDes} numberOfLines={1}>{data.content}</Text>
        </View>
      </View>
    </TouchableWithoutFeedback>
  )
}

const KnowledgeCell=({data, style,callback})=>{
  return (
    <TouchableWithoutFeedback onPress={()=>{callback(data)}}>
      <View style={[{height:95,width:125,marginRight:10},style]}>
        <Image style={{width:'100%',height:70,borderRadius:10}} source={{uri:data.image}}></Image>
        <Text style={{color:'#222222',fontSize:13,fontWeight:'500',marginTop:8}} numberOfLines={1}>{data.title}</Text>
      </View>
    </TouchableWithoutFeedback>
  )
}

const InformationCell=({data,style,callback})=>{
  return (
    <TouchableWithoutFeedback onPress={()=>{callback(data)}}>
      <View style={styles.information}>
        <View style={styles.infoLeft}>
          <Text style={{color:'#0F0F0F',fontSize:15,lineHeight:20}} numberOfLines={2}>{data.title}</Text>
          <View style={styles.infoFooter}>
            <Text style={{color:'#A6A6A6',fontSize:11}}>{data.author}</Text>
            <Text style={{color:'#A6A6A6',fontSize:11,marginLeft:20}}>{data.createTime}</Text>
          </View>
        </View>
        <Image style={styles.infoPic} source={{uri:data.thumb}}></Image>
      </View>
    </TouchableWithoutFeedback>
  )
}

class Sift_page extends Component{
  constructor(props) {
    super(props);
    this.state={
      bannerList:[],
      jobs:[],
      knowledgeList:[],
      newsList:[],
      noticeList:[{
        label:1,
        value:'执行整个动画的完成时间(ms)'
      },{
        label:2,
        value:'执行整个动画的完成时间(ms)'
      },{
        label:3,
        value:'执行整个动画的完成时间(ms)'
      }],
      isRefreshing:false
    }
  }

  componentDidMount() {
    this.getHomeData()
  }

  /*获取首页数据*/
  getHomeData() {
    NetUtil.get('base/home/page', {}, (res) => {
      if(res.code==200){
        this.setState({
          bannerList:res.data.banners,
          jobs:res.data.jobs,
          knowledgeList:res.data.knowledgeList,
          newsList:res.data.newsList
        })
        setTimeout(()=>{
          this.setState({isRefreshing:false})
        },500)
      }
    })
  }

  // 点击通知
  noticeClick(item){

  }
  moreHotClick(){
    RootNavigation.navigate('hotKnowledgeList',{})
  }
  moreInfoPageClick(){
    RootNavigation.navigate('hotInfoPage',{})
    // NativeModules.PushNative.goToChat('1')
  }
  onRefreshHandle(){
    this.setState({
      isRefreshing: true
    });
    this.getHomeData()
  }

  render() {
    const bannerEle=[]
    this.state.bannerList.forEach((item,index)=>{
      bannerEle.push(
        <TouchableWithoutFeedback style={{flex:1,borderRadius:10,overflow:"hidden"}} key={index}>
          <Image style={{flex:1,borderRadius:10,overflow:'hidden'}} source={{uri:item.image}} keyExtractor={url=>url}></Image>
        </TouchableWithoutFeedback>
      )
    })

    return(
      <View style={styles.container}>
        <ScrollView style={{flex:1}} refreshControl={<RefreshControl refreshing={this.state.isRefreshing} onRefresh = {() => this.onRefreshHandle()}/>} showsVerticalScrollIndicator={false}>
          <View style={{paddingLeft:14,paddingRight:14}}>
            <View style={styles.banner}>
              <Swiper style={styles.wrapper} showsButtons={false} autoplay={true} dot={<View style={{ backgroundColor: 'gray', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
                      activeDot={<View style={{ backgroundColor: 'white', width: 5, height: 5, borderRadius: 2.5, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
                      paginationStyle={{
                        bottom: 5,
                        left:'100%',
                        transform:[{translateX:-30}]
                      }}
              >{bannerEle}</Swiper>
            </View>
            <Card style={styles.noticeBar} elevation={3} opacity={0.05} cornerRadius={5}>
              <LinearGradient colors={['#e79c58','#f8da85']} style={{height:30,width:91,borderTopLeftRadius:5,
                borderBottomLeftRadius:5}} start={{x:0,y:1}}>
                <Text style={styles.noticeTitle}>ICON头条</Text>
              </LinearGradient>
              <View style={styles.marquee}>
                <MarqueeVertical textList={this.state.noticeList} height={27} width={width-180} direction={'up'} delay={2000} numberLines={1} textStyle={{color:'#222222',fontSize:12}} onTextClick={this.noticeClick}></MarqueeVertical>
                <Image style={styles.arrow} source={require('../../img/arrow_gray.png')}></Image>
              </View>
            </Card>
            <View style={[{marginTop:20}]}>
              <SectionHeader title={'创新兼职'} style={{paddingTop:18,height:35}} callBack={()=>{RootNavigation.navigate('WorkPage',{type:2})}}></SectionHeader>
              {this.state.jobs.map((item,index)=>{
                return <WorkCell data={item} onClick={(data)=>{RootNavigation.navigate('jobDetail',{'jobId':data.id})}} key={'job'+index} key={'work'+index}></WorkCell>
              })}
            </View>
          </View>
          <View style={{backgroundColor:'#F6F6F6',height:10}}></View>
          <View style={[{paddingBottom:20}]}>
            <SectionHeader title={'热门知识'} style={{paddingHorizontal: 15}} callBack={this.moreHotClick.bind(this)}></SectionHeader>
            <ScrollView style={styles.knowledge} horizontal={true} scrollEnabled={true} showsHorizontalScrollIndicator={false}>
              {this.state.knowledgeList.map((item,index)=>{
                return <KnowledgeCell data={item} callback={(data)=>{RootNavigation.navigate('knowledgeDetail',{id:data.id})}} style={{marginLeft: index==0?14:0}} key={'knowledge'+index}></KnowledgeCell>
              })}
            </ScrollView>
          </View>
          <View style={{backgroundColor:'#F6F6F6',height:10}}></View>
          <View>
            <SectionHeader title={'推荐资讯'} style={styles.infoNav} callBack={this.moreInfoPageClick.bind(this)}></SectionHeader>
            {this.state.newsList.map((item,index)=>{
              return <InformationCell data={item} callback={(data)=>{RootNavigation.navigate('WebViewPage',{id:data.id,type:1})}} key={'information'+index}></InformationCell>
            })}
          </View>
        </ScrollView>
      </View>
    )
  }
}

export default module=Sift_page

const styles=StyleSheet.create({
  container:{
    backgroundColor:'#fff',
    paddingTop:10,
    flex:1
  },
  section:{
    paddingLeft:14,
    paddingRight:14
  },
  banner:{
    height:170,
    borderRadius:10,
    backgroundColor:'#fff'
  },
  wrapper:{
    borderRadius: 10,
    overflow:'hidden'
  },
  /*通知*/
  noticeBar:{
    height: 30,
    width:'100%',
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    marginTop:10
  },
  noticeTitle:{
    color:'#fff',
    fontSize:14,
    fontWeight:'500',
    textAlign:'center',
    height:30,
    lineHeight:30
  },
  marquee:{
    paddingLeft: 10,
    flex:1,
    height:30,
    width:'100%',
    borderTopStyle:'solid',
    borderTopColor:'#F8F8F8',
    borderTopWidth:1,
    borderRightStyle:'solid',
    borderRightColor:'#F8F8F8',
    borderRightWidth:1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  arrow:{
    width:5,
    height:7.5
  },
  /**条目*/
  nav:{
    height:45,
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  navTitle:{
    color:'#000000',
    fontSize: 16,
    fontWeight: '600'
  },
  more:{
    flexDirection:'row',
    justifyContent:'flex-end',
    alignItems:'center'
  },
  moreTitle:{
    color:'#777777',
    fontSize:13,
    marginRight: 9
  },
  /*work*/
  workCell:{
    backgroundColor:'#fff',
    paddingTop: 22,
    flexDirection:'row',
    justifyContent:'flex-start',
    height:150
  },
  workImg:{
    width:49,
    height:49,
    borderRadius:7
  },
  workContent:{
    flex:1,
    height:'100%',
    marginLeft:14,
    backgroundColor:'#fff',
    borderBottomWidth:1,
    borderBottomStyle:'solid',
    borderBottomColor:'#F6F6F6'
  },
  workTitleBox:{
    flexDirection:'row',
    justifyContent:'space-between',
  },
  workName:{
    color:'#0F0F0F',
    fontSize:15,
    fontWeight:'500'
  },
  score:{
    color:'#E39354',
    fontSize:15
  },
  tags:{
    flexDirection:'row',
    marginTop: 8,
    justifyContent:'flex-start',
    flexWrap:'wrap',
    width:'100%',
  },
  tag:{
    backgroundColor:'#F6F6F6',
    color:'#3F3F3F',
    fontSize:11,
    height:19,
    lineHeight: 19,
    textAlign: 'center',
    paddingHorizontal:5,
    borderRadius:3,
    marginRight:4,
    marginBottom:5
  },
  timeBox:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    marginTop:12
  },
  time:{
    color:'#A5A5A5',
    fontSize:11
  },
  workDes:{
    color:'#3F3F3F',
    fontSize:11,
    marginTop:17,
    width:'100%'
  },
  /*热门知识*/
  knowledge:{
    // flexDirection:'row',
    // justifyContent:'flex-start'
  },
  /*资讯*/
  infoNav:{
    borderBottomStyle: 'solid',
    borderBottomWidth: 1,
    borderBottomColor: '#F6F6F6',
    paddingHorizontal:15
  },
  information:{
    flexDirection:'row',
    justifyContent:'flex-start',
    backgroundColor:'#fff',
    height:95,
    paddingLeft:14,
    paddingRight:14,
    paddingTop:15
  },
  infoLeft:{
    flex:1,
    marginRight:22
  },
  infoFooter:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    marginTop:10
  },
  infoPic:{
    height:65,
    width:97,
    borderRadius:7
  }
})
